<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:46:43
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:32:10
 * @FilePath: /tea-garden-web/src/pages/overview/subject-weather.vue
 * @Description: 专题-气象灾害
-->
<template>
  <div class="subject-weather">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">气象灾害(霜冻害)</span>
      <div class="subject-content">
        <!-- <component-subject-button-group
          :buttons="types"
          :active="activeType"
          @change="setActiveType"
        /> -->
        <el-row class="title-area">
          <el-col :span="12" class="title">灾害预警 (24h)</el-col>
          <el-col :span="12" class="subtitle" v-if="!loading.weatherWarn">
            <!-- {{ weatherWarn.predict_time || "--" }} -->
            {{ NowDate (date)}}
          </el-col>
        </el-row>
        <section class="info-box-1" v-if="!loading.weatherWarn">
          <span class="status-label label-1">当前状态</span>
          <span
            class="status-value value-2"
            :style="{ color: color[weatherWarn.level] }"
            >
            <!-- {{ getDictItemNameById(weatherWarn.level) || "--" }} -->
            未来24小时内不会发生
            </span
          >
          <i
            class="status-icon"
            :class="[`subject-status-${weatherWarn.level}`]"
          />
          <span class="start-label label-1">上次开始时间</span>
          <span class="start-value value-1">
            <!-- {{weatherWarn.start_time || "--" }} -->
           ---
            </span>
          <span class="end-label label-1">上次结束时间</span>
          <span class="end-value value-1">
            <!-- {{weatherWarn.end_time || "--" }} -->
            ---
            </span>
        <!-- <span class="start-label label-1">上次开始时间</span>
          <span class="start-value value-1">

            2023-12-11 03:00:00
            </span>
          <span class="end-label label-1">上次结束时间</span>
          <span class="end-value value-1">
            2023-12-12 03:00:00
            </span> -->
        </section>
        <section class="info-box-1" v-else v-loading="loading.weatherWarn" />
        <el-row class="title-area">
          <el-col :span="12" class="title">逐小时温度 (48h)</el-col>
        </el-row>
        <component-line-chart3
          :data="temperatureTrend"
          :value-range="{ min: -10, max: 45 }"
          v-if="!loading.temperatureTrend"
        />

        <section style="height: 225px; width: 282px;" v-else v-loading="loading.temperatureTrend" />
        <el-row class="info-box-2" v-if="!loading.realTimeWeather">
          <el-col :span="9" class="label">实时温度</el-col>
          <el-col :span="15" class="label">未来24小时</el-col>
          <el-col :span="9" class="value">
            {{ (realTimeWeather.real_temperature || "--") + "℃" }}
          </el-col>
          <el-col :span="15" class="value">
            {{ (realTimeWeather.predict_temperature || "--") + "℃" }}
          </el-col>
          <el-col :span="24" class="chashu">
              <div class="chashuBtn" @click="open()">
                查看茶树霜冻等级
              </div>
          </el-col>

        </el-row>
        <!-- <el-row class="info-box-2" v-if="!loading.realTimeWeatherFromCMA">
          <el-col :span="9" class="label">实时温度</el-col>
          <el-col :span="15" class="label">实时湿度</el-col>
          <el-col :span="9" class="value">
            {{ (realTimeWeatherFromCMA.TEM || "--") + "℃" }}
          </el-col>
          <el-col :span="15" class="value">
            {{ (realTimeWeatherFromCMA.RHU || "--") + "%" }}
          </el-col>
          <el-col :span="24" class="update-time">
            {{ '更新时间: '+(realTimeWeatherFromCMA.DATETIME ? formatDate(realTimeWeatherFromCMA.DATETIME) : "--") }}
          </el-col>
        </el-row> -->
        <el-row  class="info-box-2" v-else v-loading="loading.realTimeWeatherFromCMA" />
      </div>
      <!-- <component-suggestion :methods-type="'getWeatherAdvice'" /> -->
       <div v-if="dialogVisible" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeDialog">&times;</span>
        <el-row :gutter="10">
          <el-col :span="4">霜冻害等级</el-col>
          <el-col :span="6">气象制表</el-col>
          <el-col :span="7">茶树受害症状</el-col>
          <el-col :span="7">新梢芽叶受害率</el-col>
        </el-row>
         <el-row :gutter="10" v-for="(item,index) in ListRes" :key="item.index" style="font-size:14px;margin-top:10px;" :style="{ color: getColor(index) }">
          <el-col :span="4" >{{item.res1}}</el-col>
          <el-col :span="6">{{item.tem}}</el-col>
          <el-col :span="7">{{item.txt}}</el-col>
          <el-col :span="7">{{item.res2}}</el-col>
        </el-row>
      <el-row :gutter="10" class="list-b">
          <el-col :span="24">Tmin为最低气温(℃), H为Tmin持续小时数(h)</el-col>
        </el-row>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'
import { color, formatDate } from '@/util/dict.js'
export default {
  data () {
    return {
      date: new Date(),
      dialogVisible: false,
      ListRes: [
        { res1: '轻度', tem: '2≤Tmin<4且H≥4或0≤Tmin<2且2≤H<4', txt: '新梢芽叶受冻变褐色、略有损伤，出现“麻点”等', res2: '<20%' },
        { res1: '中度', tem: '0≤Tmin<2且H≥4或-2≤Tmin<0且H<4 ', txt: '新梢芽叶受冻变褐色，叶尖至叶中变红，芽叶枯萎', res2: '20%至50%' },
        { res1: '重度', tem: '-2≤Tmin<0且H≥4或Tmin<-1且H<4', txt: '新梢芽叶受冻变暗褐色，叶片卷缩干枯、易脱落新芽叶尖受冻全变褐色，芽叶成片焦枯，枝条裂皮', res2: '50%至80%' },
        { res1: '特重', tem: 'Tmin<-1且H≥4', txt: '', res2: '≥80%' }
      ]
    }
  },
  watch: {
    // activeType () {
    //   this.getWeatherWarn()
    //   this.getFarmlandWeatherWarn()
    // },
    currentFarmlandId () {}
  },
  computed: {
    ...mapState('base-overview', ['currentFarmlandId', 'realTimeWeatherFromCMA']),
    ...mapState('subject-weather', ['types', 'activeType', 'loading', 'weatherWarn', 'temperatureTrend', 'realTimeWeather']),
    ...mapGetters('common', ['getDictItemNameById']),
    color () {
      return color
    }
  },
  methods: {
    ...mapActions('subject-weather', ['getWeatherWarn', 'getTemperatureTrend', 'getRealTimeWeather', 'getFarmlandWeatherWarn']),
    ...mapActions('base-overview', ['getRealTimeWeatherFromCMA']),
    ...mapMutations('subject-weather', ['setActiveType']),
    formatDate (value) {
      return formatDate(value)
    },
    NowDate (date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    },
    open () {
      if (this.dialogVisible === true) {
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 颜色
    getColor (index) {
      if (index === 0) {
        return '#00ff5a'
      } else if (index === 1) {
        return 'orange'
      } else if (index === 2) {
        return '#ff0000'
      } else {
        return '#630000'
      }
    }

  },
  created () {
    this.getWeatherWarn()
    this.getTemperatureTrend()
    this.getRealTimeWeather()
    this.getRealTimeWeatherFromCMA()
    this.getFarmlandWeatherWarn()
  },
  mounted () {

  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-weather {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .subject-content {
      .title-area {
        height: 23px;
        line-height: 23px;
        margin-bottom: 10px;
        margin-top: 21px;
        .title {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .subtitle {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #888c96;
          text-align: right;
        }
      }
      .info-box-1 {
        width: 264px;
        height: 84px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
        border-radius: 5px 5px 5px 5px;
        position: relative;
        .status-label {
          position: absolute;
          left: 14px;
          top: 18px;
        }
        .status-value {
          position: absolute;
          left: 14px;
          top: 45px;
        }
        .status-icon {
          width: 21.5px;
          height: 21.5px;
          position: absolute;
          left: 88px;
          top: 45px;
        }
        .start-label {
          position: absolute;
          left: 130.5px;
          top: 8.5px;
        }
        .start-value {
          position: absolute;
          left: 130.5px;
          top: 28px;
        }
        .end-label {
          position: absolute;
          left: 130.5px;
          top: 45.5px;
        }
        .end-value {
          position: absolute;
          left: 130.5px;
          top: 65px;
        }
        .label-1 {
          font-size: 12px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #888c96;
        }
        .value-1 {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #369afe;
        }
        .value-2 {
          font-size: 12px;
          margin-left: -13px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #369afe;
        }
      }
      .info-box-2 {
        width: 264px;
        height: 120px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
        border-radius: 5px 5px 5px 5px;
        padding-top: 15px;
        margin-top: 15.5px;
        .label {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          text-align: center;
        }
        .value {
          font-size: 18px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089bab;
          text-align: center;
        }
        .update-time {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #888c96;
          text-align: center;
          margin-top: 5px;
          padding-bottom: 15px;
        }
        .chashu {
          text-align: center;

          .chashuBtn {
            display: inline-block;
          width: 180px;
          height: 30px;
          // background-color: #f0f9eb;
          // color: #089bab;
          background-color: #089bab;
          color: #f0f9eb;
          text-align: center;
          line-height: 30px;
          border-radius: 15px ;
          font-weight: 700;
          }
          .chashuBtn:hover {
          background-color: #f0f9eb;
          color: #089bab;
           transition: 0.5s;
          }
        }
      }
    }
  }
}
// 弹窗样式
.modal {
  position: fixed;
  top: 40%;
  left: 100%;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  // margin: 10% 0;
  padding: 30px 12px;
  width: 700px;
  background-color: #fff;
  text-align: center;
  border-radius: 15px;
  color: #089bab;
  background-color: #fff;
  font-weight: 700;
}
.close {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 10px;
  height: 10px;
  font-size: 28px;
  color: #aaa;
  cursor: pointer;
}
.list-b {
  margin-top: 16px;
  text-align: right;
  font-size: 12px;
  color: black;
}
</style>
